<script setup>
import { reactive, ref } from 'vue'
import router from "@/router";
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const active = ref('first')
const activeName = ref('first')
const name = ref('')
const bname = ref('')
const activity = ref('')
const gender = ref('')
const aname = ref('')
const aactivity = ref('')
const agender = ref('')
const dname = ref('')
const dactivity = ref('')
const dgender = ref('')
const cname = ref('')
const cactivity = ref('')
const cgender = ref('')

import { ElDrawer, ElMessageBox } from 'element-plus'
const formWidth = '80px'
const dialog = ref(false)
const loading = ref(false)
let timer
const value = ref('')
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
const bform = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const onClick = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    dialog.value = false
  }, 400)
}

const handleClose = (done) => {
  if (loading.value) {
    return
  }
  ElMessageBox.confirm('是否确认提交？')
      .then(() => {
        loading.value = true
        timer = setTimeout(() => {
          done()
          // 动画关闭需要一定的时间
          setTimeout(() => {
            loading.value = false
          }, 400)
        }, 2000)
      })
      .catch(() => {
        // catch error
      })
}

const cancelForm = () => {
  loading.value = false
  dialog.value = false
  clearTimeout(timer)
}







const aClick=()=>{
  router.push('/application/pass')
  // this.$router.push({path:'/house/list'})
}
const Click=()=>{
  router.push('/application/underpass')
  // this.$router.push({path:'/house/list'})
}
const unClick=()=>{
  router.push('/application/unpass')
  // this.$router.push({path:'/house/list'})
}
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const approvalList = [
  {
    number:'1',
    name: '张三',
    gnumber: '222',
    group: 'A招宣组',
    Work:'xx中学',
    job:'教师',
    professional:'高级',
    NativePlace:'北京',
    school:'xx',
    phone:'16321546',
  },
  {
    number:'2',
    name: '李四',
    gnumber: '186',
    group: 'B招宣组',
    Work:'中学',
    job:'经理',
    professional:'高级',
    NativePlace:'陕西',
    school:'xx',
    phone:'465445663',
  },
  {
    number:'3',
    name: '王五',
    gnumber: '3464',
    group: 'C招宣组',
    Work:'中学',
    job:'教师',
    professional:'中级',
    NativePlace:'四川',
    school:'xx',
    phone:'6565616546',
  },

]
// 重置
// const aresetParams =() => ({
//   aname : '',
//   agender : '',
//   aactivity :'',
// })
function aresetParams(){
  aname.value = ''
  agender.value = ''
  aactivity.value = ''
}
function dresetParams(){
  dname.value = ''
  dgender.value = ''
  dactivity.value = ''
}
function cresetParams(){
  cname.value = ''
  cgender.value = ''
  cactivity.value = ''
}

</script>
<template>
    <div class="common-layout">
      <el-container>
        <el-header>
          <p class="text-left">报名审批</p>
        </el-header>
        <el-main>
          <div class="navigation">
            <el-tabs
                v-model="active"
                type="card"
                class="demo-tabs"
                @tab-click="handleClick"
            >
              <el-tab-pane label="招宣活动" name="first">
                <div>
                  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="审批中" name="first">
                      <div class="sou">

                        <el-form ref="reset" inline>
                          <el-form-item>
                            <el-input v-model="aname" placeholder="请输入活动名称查询" size="small"></el-input>
                          </el-form-item>
                          <el-form-item >
                            <el-select placeholder="是否招宣年度" v-model="agender" size="small">
                              <el-option label="2024年" value="2024"></el-option>
                              <el-option label="2023年" value="2023"></el-option>
                              <el-option label="2022年" value="2022"></el-option>
                              <el-option label="2021年" value="2021"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item>
                            <el-cascader :options="options"  placeholder="请选择省/市/区" size="small" />
                          </el-form-item>
                          <el-form-item>
                            <el-input v-model="aactivity" placeholder="请输入姓名/工号查询" size="small"></el-input>
                          </el-form-item>
                          <el-form-item>
                            <el-button type="primary" @click="aresetParams">重置</el-button>
                            <el-button type="primary" @click="getUserList">查询</el-button>
                            <el-button type="primary" @click="dialog = true" >发布活动计划</el-button>
                            <el-drawer
                                v-model="dialog"
                                title="发布活动计划"
                                :before-close="handleClose"
                                direction="ltr"
                                class="demo-drawer"
                            >
                              <div class="demo-drawer__content">
                                <el-form :model="bform">
                                  <el-form-item label="活动名称" :label-width="formWidth">
                                    <el-input v-model="bform.name" autocomplete="off" />
                                  </el-form-item>
                                  <el-form-item label="组织人" :label-width="formWidth">
                                    <el-input v-model="bform.bname" autocomplete="off" />
                                  </el-form-item>
                                  <div class="demo-date-picker">


                                      <div class="block">
                                        <el-form-item label="活动时间" :label-width="formWidth">
                                        <el-date-picker
                                            v-model="value"
                                            type="daterange"
                                            start-placeholder="Start date"
                                            end-placeholder="End date"
                                            :default-time="defaultTime"
                                        />
                                        </el-form-item>
                                      </div>


                                  </div>
                                  <el-form-item label="活动地点" :label-width="formWidth">
                                    <el-select
                                        v-model="bform.region"
                                        placeholder="请选择地点"
                                    >
                                      <el-option label="校内" value="校园" />
                                      <el-option label="校外" value="校外" />
                                    </el-select>
                                  </el-form-item>
                                </el-form>
                                <div class="demo-drawer__footer">
                                  <el-button @click="cancelForm">取消</el-button>
                                  <el-button type="primary" :loading="loading" @click="onClick">
                                    {{ loading ? '提交 ...' : '提交' }}
                                  </el-button>
                                </div>
                              </div>
                            </el-drawer>
                          </el-form-item>
                        </el-form>
                      </div>
                      <div class="biao">
                        <!-- 假设这是一个审批中的项目列表 -->

                        <el-table :data="approvalList" style="width: 100%">
                            <el-table-column slot="header"  width="50" align="center">
                              <el-checkbox v-model="checked1" size="large" />
                            </el-table-column>
                            <el-table-column prop="number" label="序号" width="80"></el-table-column>
                          <el-table-column prop="name" label="姓名" width="80"></el-table-column>
                          <el-table-column prop="gnumber" label="工号" width="110"></el-table-column>
                          <el-table-column prop="group" label="所在招宣组" width="130"></el-table-column>
                          <el-table-column prop="Work" label="所在单位" width="130"></el-table-column>
                          <el-table-column prop="job" label="职务" width="100"></el-table-column>
                          <el-table-column prop="professional" label="职称" width="80"></el-table-column>
                          <el-table-column prop="NativePlace" label="籍贯" width="80"></el-table-column>
                          <el-table-column prop="school" label="毕业中学" width="100"></el-table-column>
                          <el-table-column prop="phone" label="联系电话" width="120" text="center"></el-table-column>
                          <el-table-column label="操作" width="200">
<!--                            <template v-slot="scope">-->
<!--                              <el-button size="mini" @click="Click">审批</el-button>-->

<!--                              <el-button plain @click="dialogFormVisible = true">-->
<!--                                查看进度-->
<!--                              </el-button>-->
<!--                            </template>-->
                            <template v-slot="scope">
                              <el-button plain @click="dialogFormVisible = true">
                                审批
                              </el-button>


                              <el-button size="mini" @click="Click">查看进度</el-button>

                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="审批通过" name="second">
                      <div class="sou">

                        <el-form inline>
                          <el-form-item>
                            <el-input v-model="dname" placeholder="请输入活动名称查询" size="small"></el-input>
                          </el-form-item>
                          <el-form-item >
                            <el-select placeholder="是否招宣年度" v-model="dgender" size="small">
                              <el-option label="2024年" value="2024"></el-option>
                              <el-option label="2023年" value="2023"></el-option>
                              <el-option label="2022年" value="2022"></el-option>
                              <el-option label="2021年" value="2021"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item>
                            <el-cascader :options="doptions"  placeholder="请选择省/市/区" size="small" />
                          </el-form-item>
                          <el-form-item>
                            <el-input v-model="dactivity" placeholder="请输入姓名/工号查询" size="small"></el-input>
                          </el-form-item>
                          <el-form-item>
                            <el-button type="primary" @click="dresetParams">重置</el-button>
                            <el-button type="primary" @click="getUserList">查询</el-button>
                            <el-button type="primary" @click="dialog = true" >发布活动计划</el-button>
                            <!--                            <el-button  text @click="dialog = true">发布活动计划</el-button>-->
                            <el-drawer
                                v-model="dialog"
                                title="发布活动计划"
                                :before-close="handleClose"
                                direction="ltr"
                                class="demo-drawer"
                            >
                              <div class="demo-drawer__content">
                                <el-form :model="bform">
                                  <el-form-item label="活动名称" :label-width="formWidth">
                                    <el-input v-model="bform.name" autocomplete="off" />
                                  </el-form-item>
                                  <el-form-item label="组织人" :label-width="formWidth">
                                    <el-input v-model="bform.bname" autocomplete="off" />
                                  </el-form-item>
                                  <div class="demo-date-picker">


                                    <div class="block">
                                      <el-form-item label="活动时间" :label-width="formWidth">
                                        <el-date-picker
                                            v-model="value"
                                            type="daterange"
                                            start-placeholder="Start date"
                                            end-placeholder="End date"
                                            :default-time="defaultTime"
                                        />
                                      </el-form-item>
                                    </div>


                                  </div>
                                  <el-form-item label="活动地点" :label-width="formWidth">
                                    <el-select
                                        v-model="bform.region"
                                        placeholder="请选择地点"
                                    >
                                      <el-option label="校内" value="校园" />
                                      <el-option label="校外" value="校外" />
                                    </el-select>
                                  </el-form-item>
                                </el-form>
                                <div class="demo-drawer__footer">
                                  <el-button @click="cancelForm">取消</el-button>
                                  <el-button type="primary" :loading="loading" @click="onClick">
                                    {{ loading ? '提交 ...' : '提交' }}
                                  </el-button>
                                </div>
                              </div>
                            </el-drawer>
                          </el-form-item>
                        </el-form>
                      </div>
                      <div class="biao">
                        <!-- 假设这是一个审批中的项目列表 -->

                        <el-table :data="approvalList" style="width: 100%">
                          <el-table-column  width="50" align="center">
                            <el-checkbox v-model="checked1" size="large" />
                          </el-table-column>
                          <el-table-column prop="number" label="序号" width="80"></el-table-column>
                          <el-table-column prop="name" label="姓名" width="80"></el-table-column>
                          <el-table-column prop="gnumber" label="工号" width="110"></el-table-column>
                          <el-table-column prop="group" label="所在招宣组" width="130"></el-table-column>
                          <el-table-column prop="Work" label="所在单位" width="130"></el-table-column>
                          <el-table-column prop="job" label="职务" width="100"></el-table-column>
                          <el-table-column prop="professional" label="职称" width="80"></el-table-column>
                          <el-table-column prop="NativePlace" label="籍贯" width="80"></el-table-column>
                          <el-table-column prop="school" label="毕业中学" width="100"></el-table-column>
                          <el-table-column prop="phone" label="联系电话" width="140"></el-table-column>
                          <el-table-column label="操作" width="100">
                            <template v-slot="scope">
                              <el-button size="mini" @click="aClick">查看</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="审批不通过" name="third">
                      <div class="sou">

                        <el-form inline>
                          <el-form-item>
                            <el-input v-model="cname" placeholder="请输入活动名称查询" size="small"></el-input>
                          </el-form-item>
                          <el-form-item >
                            <el-select placeholder="是否招宣年度" v-model="cgender" size="small">
                              <el-option label="2024年" value="2024"></el-option>
                              <el-option label="2023年" value="2023"></el-option>
                              <el-option label="2022年" value="2022"></el-option>
                              <el-option label="2021年" value="2021"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item>
                            <el-cascader :options="options"  placeholder="请选择省/市/区" size="small" />
                          </el-form-item>
                          <el-form-item>
                            <el-input v-model="cactivity" placeholder="请输入姓名/工号查询" size="small"></el-input>
                          </el-form-item>
                          <el-form-item>
                            <el-button type="primary" @click="cresetParams" >重置</el-button>
                            <el-button type="primary" @click="getUserList">查询</el-button>
                            <el-button type="primary" @click="dialog = true" >发布活动计划</el-button>
                            <!--                            <el-button  text @click="dialog = true">发布活动计划</el-button>-->
                            <el-drawer
                                v-model="dialog"
                                title="发布活动计划"
                                :before-close="handleClose"
                                direction="ltr"
                                class="demo-drawer"
                            >
                              <div class="demo-drawer__content">
                                <el-form :model="bform">
                                  <el-form-item label="活动名称" :label-width="formWidth">
                                    <el-input v-model="bform.name" autocomplete="off" />
                                  </el-form-item>
                                  <el-form-item label="组织人" :label-width="formWidth">
                                    <el-input v-model="bform.bname" autocomplete="off" />
                                  </el-form-item>
                                  <div class="demo-date-picker">


                                    <div class="block">
                                      <el-form-item label="活动时间" :label-width="formWidth">
                                        <el-date-picker
                                            v-model="value"
                                            type="daterange"
                                            start-placeholder="Start date"
                                            end-placeholder="End date"
                                            :default-time="defaultTime"
                                        />
                                      </el-form-item>
                                    </div>


                                  </div>
                                  <el-form-item label="活动地点" :label-width="formWidth">
                                    <el-select
                                        v-model="bform.region"
                                        placeholder="请选择地点"
                                    >
                                      <el-option label="校内" value="校园" />
                                      <el-option label="校外" value="校外" />
                                    </el-select>
                                  </el-form-item>
                                </el-form>
                                <div class="demo-drawer__footer">
                                  <el-button @click="cancelForm">取消</el-button>
                                  <el-button type="primary" :loading="loading" @click="onClick">
                                    {{ loading ? '提交 ...' : '提交' }}
                                  </el-button>
                                </div>
                              </div>
                            </el-drawer>
                          </el-form-item>
                        </el-form>
                      </div>
                      <div class="biao">
                        <!-- 假设这是一个审批中的项目列表 -->

                        <el-table :data="approvalList" style="width: 100%">
                          <el-table-column  width="50" align="center">
                            <el-checkbox v-model="checked1" size="large" />
                          </el-table-column>
                          <el-table-column prop="number" label="序号" width="80"></el-table-column>
                          <el-table-column prop="name" label="姓名" width="80"></el-table-column>
                          <el-table-column prop="gnumber" label="工号" width="110"></el-table-column>
                          <el-table-column prop="group" label="所在招宣组" width="130"></el-table-column>
                          <el-table-column prop="Work" label="所在单位" width="130"></el-table-column>
                          <el-table-column prop="job" label="职务" width="100"></el-table-column>
                          <el-table-column prop="professional" label="职称" width="80"></el-table-column>
                          <el-table-column prop="NativePlace" label="籍贯" width="80"></el-table-column>
                          <el-table-column prop="school" label="毕业中学" width="100"></el-table-column>
                          <el-table-column prop="phone" label="联系电话" width="140"></el-table-column>
                          <el-table-column label="操作" width="100">
                            <template v-slot="scope">
                              <el-button size="mini" @click="unClick">查看</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
                </el-tab-pane>
              <el-tab-pane label="母校行" name="second">Config</el-tab-pane>
            </el-tabs>
          </div>
          <div class="pagination-container">
          <el-pagination
              size="small"
              background
              layout="prev, pager, next"
              :total="50"
              class="mt-4"
          />
          </div>
        </el-main>
      </el-container>
      <el-dialog v-model="dialogFormVisible" title="报名审批" width="500">
        <el-form :model="form" label-width="120px">

          <el-form-item label="请选择您的意见">
            <el-radio-group v-model="form.region">
              <el-radio :label="'tongyi'">同意加入</el-radio>
              <el-radio :label="'buty'">不同意加入</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.region === 'buty'" label="不同意加入理由"><br>
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>

<style scoped lang="scss">
.common-layout {
  height: 100%;
  .el-header {
    background-color: #F5F6FA;
    color: #333;
    text-align: center;
    line-height:8px;
    }
  .el-main {
    background-color: #FFFFFF;
    color: #333;
    padding: 10px;
    height: 100%;
  }
  .text-left {
    text-align: left;
  }
  .pagination-container {
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
  }
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  .custom-square {
    padding: 0;
    border: 2px solid black;
    width: 15px;
    height: 15px;
    border-radius: 20%;
    background-color: transparent;
    cursor: pointer;
  }

}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
</style>